import React, { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";

interface LineContentProps {
  record: any;
  showTarget: boolean;
}

const baseOptions = {
  itemStyle: {
    borderRadius: 10,
  },
  grid: {
    left: "50",
    right: "30",
    bottom: "30",
    top: "30",
  },
};
const LineContent: React.FC<LineContentProps> = ({ record, showTarget }) => {
  const echartsRef = useRef<HTMLDivElement | null>(null);
  const myChartRef = useRef<echarts.EChartsType | null>(null);
  const referenceDivRef = useRef<HTMLDivElement>(null);

  const setCharts = (record: any) => {
    if (myChartRef.current) {
      myChartRef.current.clear();
      myChartRef.current.resize();
    } else {
      myChartRef.current = echarts.init(echartsRef.current);
    }
    const resOptions: echarts.EChartsOption = {
      ...baseOptions,
      backgroundColor: "transparent",
      tooltip: {
        trigger: "axis",
        textStyle: { color: "#fff" },
        backgroundColor: "rgba(50,50,50,0.7)",
      },
      legend: {
        data: showTarget ? ["实际值", "优化目标"] : ["实际值"],
        textStyle: { color: "#FFFFFF" },
        top: 0,
        right: 0,
        icon: "rect",
        itemWidth: 8,
        itemHeight: 8,
        lineStyle: {
          width: 0,
        },
      },
    };

    const yAxisArr: any[] = [
      {
        type: "value",
        min: function (value) {
          return value.min - (value.max - value.min) * 0.5;
        },
        max: function (value) {
          return value.max + (value.max - value.min) * 0.5;
        },
        axisLine: {
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        axisLabel: {
          formatter: "{value}%",
          color: "#FFFFFF",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.1)",
          },
        },
      },
    ];

    const curValues: any[] = [];
    const optValues: any[] = [];
    const xArr: any[] = [];
    for (const item of record) {
      xArr.push(item.optTime || null);
      curValues.push(item.curValue || null);
      optValues.push(item.optValue || null);
    }

    const xAxisArr: any = {
      type: "category",
      boundaryGap: false,
      // data: [
      //   "60min前",
      //   "40min前",
      //   "20min前",
      //   "当前",
      //   "20min后",
      //   "40min后",
      //   "60min后",
      // ],
      // data: [
      //   "120min前",
      //   "100min前",
      //   "80min前",
      //   "60min前",
      //   "40min前",
      //   "20min前",
      //   "当前",
      // ],
      data: xArr,
      axisLine: {
        lineStyle: {
          color: "#FFFFFF",
        },
      },
      axisLabel: {
        color: "#FFFFFF",
        formatter: (value: string) => {
          return dayjs(value).format("HH:mm");
        },
      },
      splitLine: {
        show: false,
      },
    };

    const seriesArr: any[] = [
      {
        name: "实际值",
        type: "line",
        data: curValues,
        lineStyle: {
          color: "#15CCFF",
        },
        itemStyle: {
          color: "#15CCFF",
        },
        tooltip: {
          valueFormatter: function (value: string) {
            return `${value} %`;
          },
        },
      },
    ];

    if (showTarget) {
      seriesArr.push({
        name: "优化目标",
        type: "line",
        data: optValues,
        lineStyle: {
          color: "#00BF24",
          type: "dashed",
        },
        itemStyle: {
          color: "#00BF24",
        },
        tooltip: {
          valueFormatter: function (value: string) {
            return `${value} %`;
          },
        },
      });
    }

    resOptions.yAxis = yAxisArr;
    resOptions.series = seriesArr;
    resOptions.xAxis = xAxisArr;
    myChartRef.current.setOption(resOptions);
  };

  useEffect(() => {
    if (!referenceDivRef.current) return;
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        setDimensions({
          refHeight: height,
          refWidth: width,
        });
      }
    });
    resizeObserver.observe(referenceDivRef.current);
    return () => {
      resizeObserver.disconnect();
    };
  }, []);

  const [dimensions, setDimensions] = useState({
    refHeight: 0,
    refWidth: 0,
  });

  useEffect(() => {
    if (record && record.length > 0) {
      setCharts(record);
    } else {
      if (myChartRef.current) {
        myChartRef.current.clear();
        myChartRef.current.resize();
      }
    }
  }, [record, showTarget, dimensions]);

  return (
    <div ref={referenceDivRef}>
      <div
        style={{
          margin: "auto",
          height: "10rem",
        }}
        ref={echartsRef}
      ></div>
    </div>
  );
};

export default LineContent;
